<template>
	<view class="container">
		<picker @change="changeUser" mode="selector" :value="userIndex" :range="users" range-key="name">
			<view class="picker flex-row">{{ userIndex >= 0 ? users[userIndex].name : '请选择用户' }}</view>
		</picker>
		<button @tap="login" class="btn" type="primary">登录</button>
	</view>
</template>

<script>
/**
 * 这里的users是公共体验账号下内置的三个用户
 * 请不要修改数据，感谢配合，真实对接的时候是不需要这个数据的
 */
import IM from '@/common/xbcim'
export default{
	data(){
		return {
			userIndex: -1,
			users: [
				{userId: 1, name: '张三'},
				{userId: 2, name: '李四'},
				{userId: 3, name: '王五'},
			]
		}
	},
	methods: {
		// 通过下来选择预设用户模拟业务系统登录
		changeUser(e){
			this.userIndex = e.detail.value
		},
		login(){
			/**
			 * 获取当前业务系统用户信息
			 * 此处通过下来选择来模拟的用户登录
			 */
			const user = this.users[this.userIndex]
			const { userId, name } = user
			
			// 缓存用户数据：userId一定要缓存，其他地方需要用到
			uni.setStorageSync('user', user)
			uni.setStorageSync('userId', userId)
			
			// 注册用户到IM
			IM.register({
				userId,
				name
			}).then(()=>{
				// 初始化IM
				IM.init().then(()=>{
					// 跳转首页
					uni.switchTab({
						url: '/pages/chat/index'
					})
				})
			}).catch(err=>{
				console.log(err)
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.container {
	padding: 40rpx;
	
	.picker {
		height: 80rpx;
		padding: 0 20rpx;
		margin-bottom: 40rpx;
		border: 2rpx solid #999;
	}
	
	.btn{
		border-radius: 0;
	}
}
</style>